<template>
  <div id="inner-con">
    <h1 class="title">模拟jsp页面</h1>
    <el-form label-width="100px">
      <el-form-item label="姓名">
        <el-input v-model="person.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="person.age"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button @click="back">展示</el-button>
        <el-button @click="close" type="primary">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    data() {
      return {
        person: {
          name: '',
          age: 0
        }
      }
    },
    methods: {
      // 推荐使用ES6语法
      back() {
        window.parent.setValue(() => {
          // 为了防止“联动”，返回一个复制的对象
          return {
            ...this.person
          }
        })
      },
      // JSP页面也可以使用ES5
      close() {
        var _this = this
        window.parent.close(function () {
          return Object.assign({}, _this.person)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin-bottom: 10px;
}
</style>